/*========================== GLOBAL ===========================*/ :root { /* ========================= ODLC GLOBAL COLORS ========================= */ --navy: #083C7C; --navy2: #083C7C; --blue: #083C7C; --cyan: #00a8ff; --purple: #6335e8; --yellow: #ffc400; --white: #ffffff; --muted: #899abd; --border: rgba(0, 168, 255, .30); --section-max-width: 1500px; /* Main Typography */ --font-main: "Inter", "Segoe UI", Arial, sans-serif; /* Main Colors */ --text-dark: #0b1f4d; --text-primary: #17203d; --text-body: #667085; --text-light: #ffffff; /* Font Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; } /* ========================================================= 2. GLOBAL BODY ========================================================= */ html, body { font-family: var(--font-main); color: var(--text-primary); font-size: 16px; line-height: 1.6; } /* ========================================================= 3. GLOBAL PARAGRAPHS ========================================================= */ p { font-size: 16px; line-height: 1.7; font-weight: 400; } /* ========================================================= 4. MAIN SECTION HEADINGS ========================================================= */ .section-title, .programmes-title { font-size: 52px; line-height: 1.12; font-weight: 800; letter-spacing: -1.2px; } /* ========================================================= 5. OTHER MAIN SECTION HEADINGS ========================================================= */ .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 46px; line-height: 1.15; font-weight: 800; letter-spacing: -1px; } /* ========================================================= 6. SPECIAL LARGE HERO HEADINGS ========================================================= */ .hero-section h1, .hero-section h2 { font-size: 54px; line-height: 1.1; font-weight: 800; } /* ========================================================= 7. SECTION DESCRIPTION ========================================================= */ .section-desc, .programmes-description, .testimonial-section > p, .blog-section > p, .section-description { font-size: 18px; line-height: 1.7; font-weight: 400; color: var(--text-body); } /* ========================================================= 8. SECTION BADGES ========================================================= */ .section-tag, .programmes-badge, .testimonial-badge, .blog-badge, .faq-badge, .hero-badge { font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: .5px; } /* ========================================================= 9. CARD HEADINGS ========================================================= */ .feature-card h4, .blog-card h4, .review-card h5, .info-content h5, .info-card h3, .impact-title { font-weight: 700; } /* ========================================================= 10. FEATURE CARD HEADING ========================================================= */ .feature-card h4 { font-size: 19px; line-height: 1.3; } /* ========================================================= 11. FEATURE CARD DESCRIPTION ========================================================= */ .feature-card p { font-size: 14px; line-height: 1.55; } /* ========================================================= 12. IMPACT CARD ========================================================= */ .impact-subtitle { font-size: 13px; font-weight: 700; letter-spacing: .7px; } .impact-title { font-size: 30px; line-height: 1.25; } .impact-item h3 { font-size: 28px; line-height: 1.1; font-weight: 800; } .impact-item p { font-size: 14px; line-height: 1.4; } /* ========================================================= 13. INFORMATION STRIP ========================================================= */ .info-content h5 { font-size: 18px; line-height: 1.3; font-weight: 700; } .info-content p { font-size: 13px; line-height: 1.5; } /* ========================================================= 14. PROGRAMME CARDS ========================================================= */ .program-card h3, .program-card h4, .programme-card h3, .programme-card h4 { font-size: 17px; line-height: 1.35; font-weight: 700; } .program-card p, .programme-card p { font-size: 13px; line-height: 1.55; } /* ========================================================= 15. PROGRAMME COUNTER ========================================================= */ .program-count-card h3 { font-size: 26px; line-height: 1.2; font-weight: 800; } .program-count-card p { font-size: 14px; line-height: 1.5; } /* ========================================================= 16. APPLICATION / GATEWAY SECTION ========================================================= */ .application-section h2, .gateway-section h2 { font-size: 46px; line-height: 1.15; font-weight: 800; } .application-section h4, .gateway-section h4 { font-size: 17px; line-height: 1.35; font-weight: 700; } .application-section p, .gateway-section p { font-size: 14px; line-height: 1.55; } /* ========================================================= 17. COMPARISON / WHY ODLC ========================================================= */ .comparison-section h2, .why-odlc-section h2 { font-size: 46px; line-height: 1.15; font-weight: 800; } .comparison-card h3, .stat-card h3 { font-size: 30px; line-height: 1.1; font-weight: 800; } .comparison-card p, .stat-card p { font-size: 13px; line-height: 1.4; font-weight: 500; } /* ========================================================= 18. CERTIFICATION CTA ========================================================= */ .certification-section h2, .skills-section h2 { font-size: 46px; line-height: 1.15; font-weight: 800; } .certification-section p, .skills-section p { font-size: 16px; line-height: 1.65; } /* ========================================================= 19. BOTTOM FEATURE STRIPS ========================================================= */ .feature-strip h4, .bottom-feature h4 { font-size: 16px; line-height: 1.3; font-weight: 700; } .feature-strip p, .bottom-feature p { font-size: 13px; line-height: 1.45; } /* ========================================================= 20. TESTIMONIALS ========================================================= */ .review-card h5 { font-size: 16px; line-height: 1.3; font-weight: 700; } .review-card small { font-size: 12px; } .review-card p { font-size: 14px; line-height: 1.65; } .review-card a { font-size: 13px; font-weight: 600; } /* ========================================================= 21. BLOG ========================================================= */ .blog-card h4 { font-size: 18px; line-height: 1.4; font-weight: 700; } .blog-card p { font-size: 14px; line-height: 1.6; } .blog-category { font-size: 12px; font-weight: 600; } .blog-footer a { font-size: 13px; font-weight: 600; } .date-box h4 { font-size: 18px; line-height: 1; } .date-box span { font-size: 11px; } /* ========================================================= 22. FAQ ========================================================= */ .faq-section h2 { font-size: 46px; line-height: 1.15; font-weight: 800; } .faq-question, .accordion-button { font-size: 16px; line-height: 1.4; font-weight: 600; } .faq-answer, .accordion-body { font-size: 14px; line-height: 1.65; } /* ========================================================= 23. BUTTONS ========================================================= */ button, .btn, a.btn, .blog-btn, .google-review-btn { font-size: 14px; line-height: 1.2; font-weight: 600; } /* ========================================================= 24. HEADER / NAVIGATION ========================================================= */ .navbar-nav .nav-link { font-size: 14px; font-weight: 600; } .navbar-brand { font-size: 18px; font-weight: 700; } /* ========================================================= 25. FOOTER ========================================================= */ footer h4, footer h5 { font-size: 16px; line-height: 1.3; font-weight: 700; } footer p, footer li, footer a { font-size: 13px; line-height: 1.6; } footer .footer-title { font-size: 17px; font-weight: 700; } /* ========================================================= 26. LAPTOP 992px - 1199px ========================================================= */ @media (max-width: 1199px) { .section-title, .programmes-title { font-size: 46px; } .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 42px; } .hero-section h1, .hero-section h2 { font-size: 48px; } .section-desc, .programmes-description { font-size: 17px; } .feature-card h4 { font-size: 18px; } .feature-card p { font-size: 13px; } .blog-card h4 { font-size: 17px; } } /* ========================================================= 27. TABLET 768px - 991px ========================================================= */ @media (max-width: 991px) { body { font-size: 15px; } p { font-size: 15px; line-height: 1.65; } /* Main headings */ .section-title, .programmes-title { font-size: 40px; line-height: 1.15; } .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 38px; } .hero-section h1, .hero-section h2 { font-size: 42px; } /* Description */ .section-desc, .programmes-description { font-size: 16px; line-height: 1.7; } /* Badge */ .section-tag, .programmes-badge, .testimonial-badge, .blog-badge, .faq-badge { font-size: 13px; } /* Cards */ .feature-card h4 { font-size: 17px; } .feature-card p { font-size: 13px; } .impact-title { font-size: 26px; } .impact-item h3 { font-size: 25px; } .impact-item p { font-size: 13px; } .blog-card h4 { font-size: 17px; } .blog-card p { font-size: 13px; } .review-card p { font-size: 13px; } /* FAQ */ .faq-question, .accordion-button { font-size: 15px; } .faq-answer, .accordion-body { font-size: 13px; } /* Buttons */ button, .btn, a.btn, .blog-btn, .google-review-btn { font-size: 13px; } } /* ========================================================= 28. MOBILE 576px - 767px ========================================================= */ @media (max-width: 767px) { body { font-size: 15px; } p { font-size: 14px; line-height: 1.65; } /* Main section headings */ .section-title, .programmes-title { font-size: 32px; line-height: 1.18; letter-spacing: -.5px; } .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 32px; line-height: 1.2; } .hero-section h1, .hero-section h2 { font-size: 34px; line-height: 1.15; } /* Description */ .section-desc, .programmes-description { font-size: 15px; line-height: 1.65; } /* Badges */ .section-tag, .programmes-badge, .testimonial-badge, .blog-badge, .faq-badge { font-size: 12px; } /* Feature cards */ .feature-card h4 { font-size: 16px; } .feature-card p { font-size: 12px; line-height: 1.5; } /* Impact */ .impact-title { font-size: 24px; } .impact-item h3 { font-size: 23px; } .impact-item p { font-size: 12px; } /* Programme cards */ .program-card h3, .program-card h4, .programme-card h3, .programme-card h4 { font-size: 16px; } .program-card p, .programme-card p { font-size: 12px; } /* Testimonials */ .review-card h5 { font-size: 15px; } .review-card small { font-size: 11px; } .review-card p { font-size: 13px; line-height: 1.6; } /* Blogs */ .blog-card h4 { font-size: 16px; } .blog-card p { font-size: 13px; } /* FAQ */ .faq-question, .accordion-button { font-size: 14px; } .faq-answer, .accordion-body { font-size: 13px; } /* Buttons */ button, .btn, a.btn, .blog-btn, .google-review-btn { font-size: 13px; } /* Footer */ footer h4, footer h5 { font-size: 15px; } footer p, footer li, footer a { font-size: 12px; } } /* ========================================================= 29. SMALL MOBILE BELOW 576px ========================================================= */ @media (max-width: 575px) { body { font-size: 14px; } p { font-size: 14px; line-height: 1.65; } /* Main headings */ .section-title, .programmes-title { font-size: 29px; line-height: 1.2; } .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 29px; line-height: 1.2; } .hero-section h1, .hero-section h2 { font-size: 30px; } /* Description */ .section-desc, .programmes-description { font-size: 14px; line-height: 1.65; } /* Badge */ .section-tag, .programmes-badge, .testimonial-badge, .blog-badge, .faq-badge { font-size: 11px; } /* Cards */ .feature-card h4 { font-size: 15px; } .feature-card p { font-size: 12px; } .impact-title { font-size: 22px; } .impact-item h3 { font-size: 21px; } .impact-item p { font-size: 11px; } .program-card h3, .program-card h4, .programme-card h3, .programme-card h4 { font-size: 15px; } .program-card p, .programme-card p { font-size: 12px; } /* Blog */ .blog-card h4 { font-size: 15px; } .blog-card p { font-size: 12px; } /* Testimonials */ .review-card h5 { font-size: 14px; } .review-card p { font-size: 12px; } /* FAQ */ .faq-question, .accordion-button { font-size: 13px; } .faq-answer, .accordion-body { font-size: 12px; } /* Buttons */ button, .btn, a.btn, .blog-btn, .google-review-btn { font-size: 12px; } /* Footer */ footer h4, footer h5 { font-size: 14px; } footer p, footer li, footer a { font-size: 11px; } } .section-container { width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; box-sizing: border-box; } /* ========================= DESKTOP ========================= */ .section-container { width: 100%; max-width: var(--section-max-width); margin: 0 auto; padding-left: 20px; padding-right: 20px; } /* ========================= LAPTOP ========================= */ @media (max-width: 1399px) { .section-container { max-width: 1300px; padding-left: 20px; padding-right: 20px; } } /* ========================= TABLET ========================= */ @media (max-width: 991px) { .section-container { max-width: 100%; padding-left: 15px; padding-right: 15px; } } /* ========================= MOBILE ========================= */ @media (max-width: 767px) { .section-container { padding-left: 10px; padding-right: 10px; } } /* ========================================================= SKILL & VOCATIONAL PROGRAMMES BANNER ========================================================= */ .skill-vocational-certified { width: 100%; min-height: 455px; position: relative; overflow: hidden; background: #062d5c; font-family: Arial, Helvetica, sans-serif; } /* ========================================================= MAIN BANNER ========================================================= */ .skill-vocational-certified-inner { width: 100%; min-height: 455px; position: relative; overflow: hidden; display: flex; align-items: center; } /* ========================================================= LEFT CONTENT ========================================================= */ .skill-vocational-certified-content { width: 52%; position: relative; z-index: 5; /* padding: 65px 40px 65px 7%; */ color: #ffffff; } /* ========================================================= CATEGORY ========================================================= */ .certificate-category { color: #9fc2ff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; margin-bottom: 12px; text-transform: uppercase; } /* ========================================================= BUTTON ========================================================= */ .certificate-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; min-height: 54px; padding: 0 28px; background: #ffffff; color: #083C7C; border: 2px solid #ffffff; border-radius: 7px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; } .certificate-btn i { font-size: 18px; transition: transform 0.3s ease; } .certificate-btn:hover { background: transparent; color: #ffffff; border-color: #ffffff; } .certificate-btn:hover i { transform: translateX(5px); } /* ========================================================= LABEL ========================================================= */ .skill-vocational-certified-label { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; margin-bottom: 25px; border-radius: 30px; background: rgba(83, 119, 205, 0.35); border: 1px solid rgba(180, 204, 255, 0.35); color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; } .skill-vocational-certified-label i { font-size: 13px; } .skill-vocational-certified-content h5 { color: #a9c7ff; } /* ========================================================= HEADING ========================================================= */ .skill-vocational-certified-content h3 { margin: 0; max-width: 600px; color: #ffffff; font-size: clamp(42px, 4.5vw, 68px); line-height: 1.08; font-weight: 700; letter-spacing: -1.5px; } .skill-vocational-certified-content h3 span { color: #a9c7ff; } /* ========================================================= SMALL LINE ========================================================= */ .skill-vocational-certified-line { width: 36px; height: 3px; margin: 24px 0 20px; background: #ffffff; border-radius: 10px; } /* ========================================================= DESCRIPTION ========================================================= */ .skill-vocational-certified-content p { max-width: 480px; margin: 0; color: #e5edfb; font-size: 16px; line-height: 1.75; text-align: left; } /* ========================================================= RIGHT IMAGE AREA ========================================================= */ .skill-vocational-certified-image { width: 58%; right: 0; clip-path: ellipse(70% 90% at 72% 50%); } .skill-vocational-certified-image::before { left: -32%; width: 58%; } /* ========================================================= IMAGE ========================================================= */ .skill-vocational-certified-image-circle { width: 100%; height: 100%; min-height: 520px; position: relative; overflow: hidden; border-left: none; background: #dce9fa; } .skill-vocational-certified-image-circle img { width: 100%; height: 100%; min-height: 820px; display: block; object-fit: cover; object-position: center; transition: transform 0.7s ease; } /* ========================================================= DARK BLUE CURVE ========================================================= */ .skill-vocational-certified-image::before { content: ""; position: absolute; top: -10%; left: -28%; width: 55%; height: 120%; z-index: 3; border-radius: 50%; background: #062d5c; } /* ========================================================= TOP DECORATIVE DOTS ========================================================= */ .skill-vocational-certified-dots { position: absolute; top: 20px; left: 28px; width: 75px; height: 75px; z-index: 6; background-image: radial-gradient( circle, rgba(155, 190, 255, 0.75) 1.5px, transparent 1.5px ); background-size: 12px 12px; opacity: 0.55; } /* ========================================================= DECORATIVE RINGS ========================================================= */ .skill-vocational-certified-ring { position: absolute; z-index: 4; border: 1px solid rgba(155, 190, 255, 0.28); border-radius: 50%; pointer-events: none; } .skill-vocational-certified-ring-top { width: 125px; height: 125px; top: -45px; left: 47%; } .skill-vocational-certified-ring-top::before, .skill-vocational-certified-ring-top::after { content: ""; position: absolute; border: 1px solid rgba(155, 190, 255, 0.22); border-radius: 50%; } .skill-vocational-certified-ring-top::before { inset: 15px; } .skill-vocational-certified-ring-top::after { inset: 30px; } /* ========================================================= BOTTOM RING ========================================================= */ .skill-vocational-certified-ring-bottom { width: 150px; height: 150px; bottom: -80px; left: -70px; border: 3px solid rgba(155, 190, 255, 0.75); } .skill-vocational-certified-ring-bottom::before { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(155, 190, 255, 0.25); border-radius: 50%; } /* ========================================================= RESPONSIVE - LARGE TABLET ========================================================= */ @media (max-width: 1199px) { .skill-vocational-certified, .skill-vocational-certified-inner { min-height: 430px; } .skill-vocational-certified-content { padding-left: 6%; } .skill-vocational-certified-content h1 { font-size: 50px; } .skill-vocational-certified-content p { max-width: 430px; font-size: 14px; } } /* ========================================================= SKILL & VOCATIONAL BANNER RESPONSIVE - TABLET + MOBILE ========================================================= */ /* ========================================================= TABLET 768px - 991px ========================================================= */ @media (min-width: 768px) and (max-width: 991px) { .skill-vocational-certified { min-height: 430px; } .skill-vocational-certified-inner { min-height: 430px; display: flex; align-items: center; } /* --------------------------------------------- CONTENT --------------------------------------------- */ .skill-vocational-certified-content { width: 55%; padding: 45px 25px 45px 5%; z-index: 6; } .skill-vocational-certified-label { padding: 8px 15px; margin-bottom: 18px; font-size: 11px; } .skill-vocational-certified-content h1 { max-width: 500px; font-size: 40px !important; line-height: 1.15; letter-spacing: -0.8px; } .skill-vocational-certified-line { margin: 18px 0 16px; } .skill-vocational-certified-content p { max-width: 420px; font-size: 14px; line-height: 1.6; color: #ffffff; } /* --------------------------------------------- IMAGE --------------------------------------------- */ .skill-vocational-certified-image { width: 58%; height: 100%; min-height: 430px; clip-path: ellipse(72% 90% at 75% 50%); } .skill-vocational-certified-image-circle { min-height: 430px; } .skill-vocational-certified-image-circle img { min-height: 430px; object-fit: cover; object-position: 62% center; } /* --------------------------------------------- BLUE CURVE --------------------------------------------- */ .skill-vocational-certified-image::before { top: -5%; left: -30%; width: 48%; height: 110%; } /* --------------------------------------------- DECORATIONS --------------------------------------------- */ .skill-vocational-certified-dots { width: 60px; height: 60px; top: 15px; left: 18px; background-size: 10px 10px; } .skill-vocational-certified-ring-top { width: 100px; height: 100px; top: -30px; left: 48%; } } /* ========================================================= MOBILE 0px - 767px ========================================================= */ @media (max-width: 767px) { /* --------------------------------------------- MAIN BANNER --------------------------------------------- */ .skill-vocational-certified { width: 100%; min-height: 560px; height: auto; position: relative; overflow: hidden; background: #062d5c; } /* --------------------------------------------- INNER --------------------------------------------- */ .skill-vocational-certified-inner { width: 100%; min-height: 560px; height: auto; position: relative; display: block; overflow: hidden; } /* --------------------------------------------- IMAGE --------------------------------------------- */ .skill-vocational-certified-image { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-height: 560px; z-index: 1; clip-path: none !important; } .skill-vocational-certified-image-circle { width: 100%; height: 100%; min-height: 560px; border: 0; background: #dce9fa; overflow: hidden; } .skill-vocational-certified-image-circle img { width: 100% !important; height: 100% !important; min-height: 560px; display: block; object-fit: cover !important; /* Move image slightly right so student's face remains visible. */ object-position: 62% center !important; } /* --------------------------------------------- DARK OVERLAY IMPORTANT FOR TEXT VISIBILITY --------------------------------------------- */ .skill-vocational-certified-image::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient( 180deg, rgba(6, 45, 92, 0.15) 0%, rgba(6, 45, 92, 0.30) 28%, rgba(6, 45, 92, 0.65) 53%, rgba(6, 45, 92, 0.92) 100% ); pointer-events: none; } /* --------------------------------------------- REMOVE DESKTOP BLUE CURVE --------------------------------------------- */ .skill-vocational-certified-image::before { display: none !important; } /* --------------------------------------------- CONTENT --------------------------------------------- */ .skill-vocational-certified-content { position: relative; z-index: 5; width: 100% !important; min-height: 560px; height: auto; padding: 115px 22px 55px !important; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; box-sizing: border-box; } /* --------------------------------------------- LABEL --------------------------------------------- */ .skill-vocational-certified-label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; margin-bottom: 18px; border-radius: 25px; background: rgba(5, 50, 100, 0.70); border: 1px solid rgba(255,255,255,0.40); color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; backdrop-filter: blur(5px); } .skill-vocational-certified-label i { font-size: 12px; } /* --------------------------------------------- HEADING --------------------------------------------- */ .skill-vocational-certified-content h1 { width: 100%; max-width: 100%; margin: 0 !important; color: #ffffff !important; font-size: 31px !important; line-height: 1.16 !important; font-weight: 700 !important; letter-spacing: -0.5px; text-align: left; text-shadow: 0 2px 8px rgba(0,0,0,0.60); } .skill-vocational-certified-content h1 span { color: #b8d4ff !important; } /* --------------------------------------------- LINE --------------------------------------------- */ .skill-vocational-certified-line { width: 40px; height: 3px; margin: 17px 0 16px; background: #ffffff; border-radius: 10px; } /* --------------------------------------------- DESCRIPTION --------------------------------------------- */ .skill-vocational-certified-content p { width: 100%; max-width: 100%; margin: 0; color: #ffffff !important; font-size: 14px !important; line-height: 1.65 !important; font-weight: 400; text-align: left !important; text-shadow: 0 2px 8px rgba(0,0,0,0.70); } /* --------------------------------------------- STRONG TEXT --------------------------------------------- */ .skill-vocational-certified-content p strong, .skill-vocational-certified-content p b { color: #ffffff !important; font-weight: 700 !important; } /* --------------------------------------------- DECORATIVE DOTS --------------------------------------------- */ .skill-vocational-certified-dots { width: 55px; height: 55px; top: 15px; left: 15px; z-index: 6; background-size: 9px 9px; opacity: 0.35; } /* --------------------------------------------- TOP RING --------------------------------------------- */ .skill-vocational-certified-ring-top { width: 85px; height: 85px; top: -25px; right: -10px; left: auto; z-index: 4; opacity: 0.5; } .skill-vocational-certified-ring-top::before { inset: 12px; } .skill-vocational-certified-ring-top::after { inset: 25px; } /* --------------------------------------------- BOTTOM RING --------------------------------------------- */ .skill-vocational-certified-ring-bottom { width: 100px; height: 100px; bottom: -55px; left: -50px; opacity: 0.45; } } /* ========================================================= SMALL MOBILE 481px - 600px ========================================================= */ @media (min-width: 481px) and (max-width: 600px) { .skill-vocational-certified { min-height: 540px; } .skill-vocational-certified-inner { min-height: 540px; } .skill-vocational-certified-image, .skill-vocational-certified-image-circle { min-height: 540px; } .skill-vocational-certified-image-circle img { min-height: 540px; object-position: 60% center !important; } .skill-vocational-certified-content { min-height: 540px; padding: 105px 24px 45px !important; } .skill-vocational-certified-content h1 { font-size: 30px !important; } } /* ========================================================= SMALL PHONE ========================================================= */ @media (max-width: 480px) { .skill-vocational-certified { min-height: 520px; } .skill-vocational-certified-inner { min-height: 520px; } .skill-vocational-certified-image { min-height: 520px; } .skill-vocational-certified-image-circle { min-height: 520px; } .skill-vocational-certified-image-circle img { min-height: 520px; object-position: 59% center !important; } .skill-vocational-certified-content { min-height: 520px; padding: 95px 19px 38px !important; } .skill-vocational-certified-label { padding: 7px 12px; margin-bottom: 15px; font-size: 10px; } .skill-vocational-certified-content h1 { font-size: 27px !important; line-height: 1.18 !important; letter-spacing: -0.3px; } .skill-vocational-certified-line { width: 35px; height: 3px; margin: 14px 0 14px; } .skill-vocational-certified-content p { font-size: 13px !important; line-height: 1.6 !important; } .skill-vocational-certified-dots { width: 48px; height: 48px; top: 12px; left: 12px; background-size: 8px 8px; } .skill-vocational-certified-ring-top { width: 75px; height: 75px; top: -20px; right: -15px; } .skill-vocational-certified-ring-bottom { width: 85px; height: 85px; bottom: -45px; left: -40px; } } /* ========================================================= EXTRA SMALL PHONE ========================================================= */ @media (max-width: 360px) { .skill-vocational-certified { min-height: 500px; } .skill-vocational-certified-inner { min-height: 500px; } .skill-vocational-certified-image, .skill-vocational-certified-image-circle { min-height: 500px; } .skill-vocational-certified-image-circle img { min-height: 500px; object-position: 57% center !important; } .skill-vocational-certified-content { min-height: 500px; padding: 85px 16px 30px !important; } .skill-vocational-certified-content h1 { font-size: 24px !important; line-height: 1.18 !important; } .skill-vocational-certified-content p { font-size: 12px !important; line-height: 1.55 !important; } .skill-vocational-certified-label { font-size: 9px; padding: 6px 10px; } } /* ========================================================= ELIGIBILITY CRITERIA ========================================================= */ .eligibility-section { width: 100%; padding: 60px 0; background: #ffffff; font-family: Arial, Helvetica, sans-serif; position: relative; } /* ========================================================= CONTAINER ========================================================= */ .eligibility-section .container { width: 100%; max-width: 1740px; margin: 0 auto; padding-left: 42px; padding-right: 42px; box-sizing: border-box; } /* ========================================================= HEADING ========================================================= */ .eligibility-heading { text-align: center; margin-bottom: 34px; } .eligibility-heading h2 { margin: 0; color: #083C7C; font-size: 30px; font-weight: 700; line-height: 1.2; } .eligibility-line { width: 42px; height: 3px; margin: 12px auto 0; background: #f2b632; border-radius: 10px; } /* ========================================================= CARD GRID ========================================================= */ .eligibility-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; width: 100%; } /* ========================================================= CARD ========================================================= */ .eligibility-card { min-height: 188px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 18px 14px 28px; background: #ffffff; border: 1px solid #dce8f7; border-radius: 10px; box-sizing: border-box; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } /* ========================================================= HOVER ========================================================= */ .eligibility-card:hover { transform: translateY(-4px); border-color: #083C7C; box-shadow: 0 10px 25px rgba(8, 60, 124, 0.10); } /* ========================================================= ICON ========================================================= */ .eligibility-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; border-radius: 50%; background: #083C7C; color: #ffffff; flex-shrink: 0; } .eligibility-icon i { font-size: 20px; } /* ========================================================= ELIGIBILITY PARAGRAPH - VERTICAL CENTER ========================================================= */ /* ========================================================= ELIGIBILITY CONTENT - CENTER ALIGN ========================================================= */ .eligibility-content { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; } /* ========================================================= PARAGRAPH ========================================================= */ .eligibility-content p { width: 100%; max-width: 100%; margin: 0; color: #53657a; font-size: 16px; font-weight: 400; line-height: 1.55; text-align: center; display: block; flex: none; } /* ========================================================= NUMBER ========================================================= */ .eligibility-number { position: absolute; right: 10px; bottom: 3px; color: #e5edf8; font-size: 25px; font-weight: 700; line-height: 1; } /* ========================================================= DECORATIVE DOTS ========================================================= */ .eligibility-section::before { content: ""; position: absolute; top: 18px; left: 30px; width: 55px; height: 55px; background-image: radial-gradient( #8eb7e8 1.5px, transparent 1.5px ); background-size: 10px 10px; opacity: 0.35; pointer-events: none; } .eligibility-section::after { content: ""; position: absolute; top: 18px; right: 30px; width: 55px; height: 55px; background-image: radial-gradient( #8eb7e8 1.5px, transparent 1.5px ); background-size: 10px 10px; opacity: 0.35; pointer-events: none; } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1100px) { .eligibility-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 768px) { .eligibility-section { padding: 50px 0; } .eligibility-section .container { padding: 0 20px; } .eligibility-heading h2 { font-size: 28px; } .eligibility-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 576px) { .eligibility-section { padding: 40px 0; } .eligibility-section .container { padding: 0 16px; } .eligibility-heading { margin-bottom: 26px; } .eligibility-heading h2 { font-size: 26px; } .eligibility-grid { grid-template-columns: 1fr; gap: 14px; } .eligibility-card { min-height: 170px; padding: 18px 15px 28px; } } /* ========================================================= COURSES OFFERED SECTION ========================================================= */ .courses-section { width: 100%; padding: 60px 0; background: #f7faff; } .courses-container { width: 100%; max-width: 1740px; margin: 0 auto; padding-left: 42px; padding-right: 42px; box-sizing: border-box; } /* ========================================================= HEADING ========================================================= */ .courses-heading { text-align: center; margin-bottom: 28px; } .courses-heading h2 { margin: 0; color: #083C7C; font-size: 30px; font-weight: 700; line-height: 1.2; } .courses-heading-line { width: 42px; height: 3px; margin: 12px auto 0; background: #f2b632; border-radius: 10px; } /* ========================================================= CATEGORY GRID ========================================================= */ .courses-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 24px; width: 100%; } /* ========================================================= CATEGORY CARD ========================================================= */ .course-category-card { width: 100%; min-height: 230px; padding: 18px 18px 20px; background: #ffffff; border: 1px solid #d8e5f4; border-radius: 12px; box-sizing: border-box; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .course-category-card:hover { transform: translateY(-7px); border-color: #9db9dc; box-shadow: 0 18px 40px rgba(8, 60, 124, 0.12); } /* ========================================================= CATEGORY HEADER ========================================================= */ .course-category-header { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; } /* ========================================================= CATEGORY ICON ========================================================= */ .course-category-icon { width: 48px; height: 48px; flex: 0 0 48px; display: flex; align-items: center; justify-content: center; background: #083C7C; color: #ffffff; border-radius: 7px; } .course-category-icon i { font-size: 22px; } /* ========================================================= CATEGORY TITLE ========================================================= */ .course-category-header h3 { margin: 0; color: #083C7C; font-size: 24px; font-weight: 700; line-height: 1.4; } /* ========================================================= COURSE LIST ========================================================= */ .course-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 10px; } /* ========================================================= COURSE ITEM ========================================================= */ .course-item { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 8px 11px; background: #ffffff; border: 1px solid #e1eaf5; border-radius: 7px; box-sizing: border-box; } .course-item:hover { background: #f2f7fd; border-color: #b7cde6; transform: translateX(2px); } /* ========================================================= NUMBER ========================================================= */ .course-item span { flex: 0 0 auto; color: #083C7C; font-size: 16px; font-weight: 700; } /* ========================================================= COURSE TEXT ========================================================= */ .course-item p { margin: 0; color: #334b68; font-size: 16px; font-weight: 400; line-height: 1.35; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .courses-container { padding: 0 25px; } .courses-grid { grid-template-columns: 1fr; } .course-category-card { min-height: auto; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .courses-section { padding: 50px 0; } .courses-container { padding: 0 20px; } .courses-heading { margin-bottom: 24px; } .courses-heading h2 { font-size: 28px; } .course-category-header { gap: 13px; } .course-category-header h3 { font-size: 24px; } .course-list { grid-template-columns: 1fr; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .courses-section { padding: 40px 0; } .courses-container { padding: 0 16px; } .course-category-card { padding: 8px 9px 13px; } .course-category-icon { width: 44px; height: 44px; flex-basis: 44px; } .course-category-icon i { font-size: 19px; } .course-category-header h3 { font-size: 24px; } .course-item p { font-size: 16px; } } /* ========================================================= COURSES SECTION ANIMATION ========================================================= */ .courses-section { animation: coursesFadeIn 0.8s ease both; } @keyframes coursesFadeIn { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } } .courses-heading h2 { animation: headingReveal 0.7s ease 0.15s both; } .courses-heading-line { animation: lineReveal 0.7s ease 0.35s both; transform-origin: center; } @keyframes headingReveal { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes lineReveal { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } } .course-category-card { opacity: 0; transform: translateY(30px); animation: courseCardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* Card 01 */ .course-category-card:nth-child(1) { animation-delay: 0.25s; } /* Card 02 */ .course-category-card:nth-child(2) { animation-delay: 0.35s; } /* Card 03 */ .course-category-card:nth-child(3) { animation-delay: 0.45s; } /* Card 04 */ .course-category-card:nth-child(4) { animation-delay: 0.55s; } /* Card 05 */ .course-category-card:nth-child(5) { animation-delay: 0.65s; } /* Card 06 */ .course-category-card:nth-child(6) { animation-delay: 0.75s; } @keyframes courseCardReveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .course-category-icon { transition: transform 0.35s ease, border-radius 0.35s ease, box-shadow 0.35s ease; } .course-category-card:hover .course-category-icon { transform: translateY(-3px) scale(1.06); border-radius: 10px; box-shadow: 0 8px 18px rgba(8, 60, 124, 0.20); } .course-item { transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .course-item:hover { transform: translateX(5px); background: #f3f8ff; border-color: #b5cbe4; box-shadow: 0 4px 12px rgba(8, 60, 124, 0.08); } .course-item span { transition: transform 0.25s ease; } .course-item:hover span { transform: translateX(2px); } .course-category-icon { position: relative; overflow: hidden; } .course-category-icon::after { content: ""; position: absolute; top: -60%; left: -100%; width: 60%; height: 220%; background: rgba(255, 255, 255, 0.20); transform: rotate(25deg); transition: left 0.6s ease; } .course-category-card:hover .course-category-icon::after { left: 150%; } @media (prefers-reduced-motion: reduce) { .courses-section, .courses-heading h2, .courses-heading-line, .course-category-card { animation: none !important; opacity: 1; transform: none; } .course-category-card, .course-category-icon, .course-item { transition: none !important; } } /* ========================================================= MODERN ANIMATED SECTION HEADING ========================================================= */ .animated-section-heading { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 35px; } /* ========================================================= ICON CIRCLE ========================================================= */ .heading-icon { position: relative; width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: #ffffff; border: 1px solid #d6e3f5; border-radius: 50%; box-shadow: 0 8px 25px rgba(8, 60, 124, 0.10); z-index: 1; } /* Inner soft circle */ .heading-icon::before { content: ""; position: absolute; width: 58px; height: 58px; background: #edf4ff; border-radius: 50%; z-index: -1; } /* Graduation icon */ .heading-icon i { font-size: 30px; color: #0755b8; transition: transform 0.4s ease, color 0.4s ease; } /* ========================================================= ROTATING ANIMATION RING ========================================================= */ .heading-icon::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid transparent; border-top-color: #3d83e8; border-right-color: #3d83e8; opacity: 0; transition: opacity 0.3s ease; } /* Animation on hover */ .animated-section-heading:hover .heading-icon::after { opacity: 1; animation: headingRotate 1.5s linear infinite; } @keyframes headingRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Icon movement */ .animated-section-heading:hover .heading-icon i { transform: translateY(-2px) scale(1.08); color: #003f91; } /* ========================================================= HEADING ========================================================= */ .animated-section-heading h2 { margin: 0; color: #083C7C; font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.3px; transition: color 0.3s ease, transform 0.3s ease; } .animated-section-heading:hover h2 { color: #064b9b; transform: translateY(-2px); } /* ========================================================= YELLOW ACCENT LINE ========================================================= */ .heading-accent { width: 42px; height: 4px; margin-top: 12px; background: #f4b400; border-radius: 10px; transform-origin: center; transition: width 0.4s ease, box-shadow 0.4s ease; } .animated-section-heading:hover .heading-accent { width: 65px; box-shadow: 0 3px 10px rgba(244, 180, 0, 0.25); } /* ========================================================= SKILL & VOCATIONAL certified DIPLOMA TABLET + MOBILE RESPONSIVE ========================================================= */ /* ---------- TABLET : 768px - 991px ---------- */ @media (min-width: 768px) and (max-width: 991px) { .skill-vocational-certified { width: 100% !important; min-height: auto !important; height: auto !important; background: #062d5c !important; overflow: hidden !important; } .skill-vocational-certified-inner { width: 100% !important; min-height: auto !important; height: auto !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* IMAGE */ .skill-vocational-certified-image { position: relative !important; inset: auto !important; width: 100% !important; height: 330px !important; min-height: 330px !important; order: 1 !important; clip-path: none !important; overflow: hidden !important; } .skill-vocational-certified-image-circle { width: 100% !important; height: 330px !important; min-height: 330px !important; border: none !important; border-radius: 0 !important; overflow: hidden !important; } .skill-vocational-certified-image-circle img { width: 100% !important; height: 330px !important; min-height: 330px !important; object-fit: cover !important; object-position: center 35% !important; display: block !important; } .skill-vocational-certified-image::before, .skill-vocational-certified-image::after { display: none !important; } /* CONTENT */ .skill-vocational-certified-content { position: relative !important; width: 100% !important; min-height: auto !important; height: auto !important; order: 2 !important; padding: 42px 6% 48px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; background: #062d5c !important; box-sizing: border-box !important; } .skill-vocational-certified-label { margin-bottom: 18px !important; font-size: 11px !important; padding: 8px 14px !important; white-space: normal !important; } .skill-vocational-certified-content h5 { margin: 0 0 10px !important; font-size: 14px !important; line-height: 1.4 !important; color: #a9c7ff !important; } .skill-vocational-certified-content h3, .skill-vocational-certified-content h1 { width: 100% !important; max-width: 700px !important; margin: 0 !important; color: #fff !important; font-size: 42px !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: -.8px !important; text-align: left !important; } .skill-vocational-certified-content h3 span, .skill-vocational-certified-content h1 span { color: #a9c7ff !important; } .skill-vocational-certified-line { width: 45px !important; height: 3px !important; margin: 18px 0 18px !important; background: #fff !important; } .skill-vocational-certified-content p { width: 100% !important; max-width: 680px !important; margin: 0 0 18px !important; color: #e9f0fb !important; font-size: 15px !important; line-height: 1.7 !important; text-align: left !important; } .certificate-btn { width: auto !important; min-width: 240px !important; min-height: 50px !important; padding: 0 22px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; border-radius: 7px !important; font-size: 13px !important; } /* DECORATIONS */ .skill-vocational-certified-dots { width: 60px !important; height: 60px !important; top: 15px !important; left: 15px !important; opacity: .3 !important; } .skill-vocational-certified-ring-top { width: 90px !important; height: 90px !important; top: -30px !important; right: -25px !important; opacity: .35 !important; } .skill-vocational-certified-ring-bottom { width: 100px !important; height: 100px !important; bottom: -55px !important; left: -50px !important; opacity: .3 !important; } } /* ---------- MOBILE : 767px and below ---------- */ @media (max-width: 767px) { .skill-vocational-certified { width: 100% !important; min-height: auto !important; height: auto !important; background: #062d5c !important; overflow: hidden !important; } .skill-vocational-certified-inner { width: 100% !important; min-height: auto !important; height: auto !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* IMAGE ON TOP */ .skill-vocational-certified-image { position: relative !important; inset: auto !important; width: 100% !important; height: 235px !important; min-height: 235px !important; order: 1 !important; clip-path: none !important; overflow: hidden !important; } .skill-vocational-certified-image-circle { width: 100% !important; height: 235px !important; min-height: 235px !important; border: none !important; border-radius: 0 !important; overflow: hidden !important; } .skill-vocational-certified-image-circle img { width: 100% !important; height: 235px !important; min-height: 235px !important; object-fit: cover !important; object-position: center 35% !important; display: block !important; } .skill-vocational-certified-image::before, .skill-vocational-certified-image::after { display: none !important; } /* CONTENT BELOW IMAGE */ .skill-vocational-certified-content { position: relative !important; width: 100% !important; min-height: auto !important; height: auto !important; order: 2 !important; padding: 30px 22px 38px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; background: #062d5c !important; box-sizing: border-box !important; } .skill-vocational-certified-label { max-width: 100% !important; margin-bottom: 15px !important; padding: 7px 11px !important; font-size: 10px !important; line-height: 1.3 !important; white-space: normal !important; } .skill-vocational-certified-content h5 { margin: 0 0 8px !important; font-size: 12px !important; line-height: 1.4 !important; letter-spacing: .6px !important; color: #a9c7ff !important; } .skill-vocational-certified-content h3, .skill-vocational-certified-content h1 { width: 100% !important; max-width: 100% !important; margin: 0 !important; color: #fff !important; font-size: 32px !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: -.5px !important; text-align: left !important; } .skill-vocational-certified-content h3 span, .skill-vocational-certified-content h1 span { color: #a9c7ff !important; } .skill-vocational-certified-line { width: 38px !important; height: 3px !important; margin: 15px 0 !important; background: #fff !important; } .skill-vocational-certified-content p { width: 100% !important; max-width: 100% !important; margin: 0 0 15px !important; color: #e9f0fb !important; font-size: 14px !important; line-height: 1.65 !important; text-align: left !important; } .certificate-btn { width: 100% !important; max-width: 100% !important; min-height: 48px !important; margin-top: 5px !important; padding: 0 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-sizing: border-box !important; border-radius: 7px !important; font-size: 12px !important; } .skill-vocational-certified-dots { width: 45px !important; height: 45px !important; top: 10px !important; left: 10px !important; opacity: .25 !important; } .skill-vocational-certified-ring-top { width: 70px !important; height: 70px !important; top: -25px !important; right: -20px !important; opacity: .3 !important; } .skill-vocational-certified-ring-bottom { width: 80px !important; height: 80px !important; bottom: -45px !important; left: -40px !important; opacity: .25 !important; } } /* ---------- SMALL MOBILE : 480px and below ---------- */ @media (max-width: 480px) { .skill-vocational-certified-image, .skill-vocational-certified-image-circle, .skill-vocational-certified-image-circle img { height: 205px !important; min-height: 205px !important; } .skill-vocational-certified-content { padding: 26px 26px 32px !important; } .skill-vocational-certified-content h3, .skill-vocational-certified-content h1 { font-size: 29px !important; line-height: 1.1 !important; } .skill-vocational-certified-content p { font-size: 13px !important; line-height: 1.6 !important; } .certificate-btn { min-height: 46px !important; font-size: 11px !important; } } /* ---------- VERY SMALL MOBILE : 360px and below ---------- */ @media (max-width: 360px) { .skill-vocational-certified-image, .skill-vocational-certified-image-circle, .skill-vocational-certified-image-circle img { height: 185px !important; min-height: 185px !important; } .skill-vocational-certified-content { padding: 23px 16px 30px !important; } .skill-vocational-certified-content h3, .skill-vocational-certified-content h1 { font-size: 26px !important; } .skill-vocational-certified-content p { font-size: 12px !important; line-height: 1.6 !important; } } .programme-duration { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 20px; padding: 10px 18px; background: #ffffff; border: 2px solid #a9c7ff; border-radius: 30px; color: #083C7C; font-size: 18px; font-weight: 700; line-height: 1; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); } .programme-duration i { font-size: 17px; color: #083C7C; } @media (max-width: 767px) { .programme-duration { margin: 14px 0 18px; padding: 9px 15px; font-size: 15px; gap: 8px; } .programme-duration i { font-size: 15px; } } /* ============================================================================ SKILL & VOCATIONAL - CERTIFICATE PROGRAMMES: THE BANNER AND THE TWO SECTIONS PUT ON THE SAME STANDARD AS THE ECCE PAGES ---------------------------------------------------------------------------- Source of every number: the Grade 10 banner on Programmes/Academic/secondarylevel-classx.php, and the site ladder the header and the footer run on. This page does not load global-typography.css, so nothing here is inherited - every value is written out. NOTHING IN THE MARKUP WAS TOUCHED. The same words, the same order, the same elements. SKILL & VOCATIONAL PROGRAMMES, CERTIFICATE PROGRAMMES, both paragraphs, the duration pill, the button, the three decorations and the photograph are all still in certificateprogrammes-6months.php exactly as they were. --------------------------------------------------------------------------- THE BACKGROUND IS NOT TOUCHED This page's banner navy is #062D5C and it stays #062D5C. That is this page's own colour, arrived at on its own; the Grade 10 navy is not carried across as a background on this page or on any page that comes next. The lettering inside the duration pill and the button is #083C7C on white and is left exactly as it is. --------------------------------------------------------------------------- 1. THE BANNER TYPE Measured at a 912px viewport before this block: the pill ".skill-vocational-certified-label" 13px icon, 8px 14px padding, 18px below, rgba(83,119,205,.35) fill "SKILL & VOCATIONAL PROGRAMMES" 16px/25.6 ls 2px uppercase the title h3, and its span 42px/46.2 w700 ls -0.8px mixed case, span #A9C7FF the rule 45 x 3px r10 18px either side "Duration: 6 Months" 18px/18 w700, no tracking both paragraphs 15px/25.5 no tracking, solid #E9F0FB, 680px wide the button 14px All of it now on the Grade 10 scale: the pill 16px/1.3 w700 ls .3px gap 10 pad 11px 20px mb 25 fill rgba(255,255,255,.1) border 1px rgba(255,255,255,.35) radius 30px width fit-content 15px/10px 18px/9/22 ≤1199 14px/9px 17px/8/20 ≤991 13px/8px 15px/8/18 ≤767 12px/7px 13px/7/16 ≤575 11px/6px 12px/6/14 ≤480 the title Roboto, Arial 40px/1.08 w800 ls -1px uppercase, span #A9C7FF 40px ≤1199 · 36px/1.10/-0.8 ≤991 · 34px/1.08/-0.8 ≤767 30px/1.10/-0.6 ≤575 · 29px/1.10/-0.4 ≤400 the rule 36 x 3px r10px margin 24px 0 20px 18/15 ≤991 · 30 x 3px m16 ≤480 both paragraphs Arial 17px/1.75 ls .2px rgba(255,255,255,.9) 16px ≤1399 · 16px/1.65 ≤991 · 15px/1.6 ≤767 · 14px/1.6 ≤575 duration and button the pill's type - 15px, w700, ls .3px The two paragraphs are given the same role as Grade 10's description. There are two of them where Grade 10 has one; both are treated the same way. --------------------------------------------------------------------------- 2. THE BANNER GUTTER The banner text sat 53.8px in from the left of the page while the header logo sits on 26.9px and the two sections below the banner were running the full width of the page at 0. The gutter goes on the content column as a margin rather than as padding on the section, because on this page the photograph is a normal flex item of the same column and not anchored to the right edge the way Grade 10's is. A padding on the section would have pushed the photograph in from the left and left a navy strip down its side. A margin on the content column moves only the text, and the photograph still bleeds the full width of the page. padding-left 0, margin-left max(4%, 50% - 690px) default max(3%, 50% - 690px) 1199px and below max(5%, 50% - 690px) 767px and below max(4%, 50% - 690px) 480px and below --------------------------------------------------------------------------- 3. THE TWO SECTIONS ON THE HEADER AND FOOTER WIDTHS Measured at a 912px viewport before this block: header and footer content 26.9 .... 869.9 843.0 wide Eligibility Criteria 0.0 .... 896.8 896.8 wide 26.9 outside each side Course categories 0.0 .... 896.8 896.8 wide 26.9 outside each side Both were running the full width of the page, outside the header and the footer rather than level with them. They now run on the site ladder - width 92%, max-width 1380px, margin-left and margin-right auto 94% 1199px and below 90% 767px and below 92% 480px and below .eligibility-section is scoped to its own direct child. The class on that child is the plain class name "container", which is used all over the site, so it is not safe to name on its own. Both sections were already carrying the same padding above and below - 60px and 60px on each - so they are not named here. Nothing about their vertical rhythm changes. --------------------------------------------------------------------------- 4. THE THREE DECORATIONS The dotted grid and the two rings were turned off. Grade 10's banner has none and neither do the ECCE banners now. They are hidden, not deleted - remove the one rule below and they come straight back. --------------------------------------------------------------------------- NOT TOUCHED The photograph keeps this page's own shape. Here the banner is stacked - the text above, a full-width 330px band of picture below it - where Grade 10 and the ECCE pages are side by side with the picture cut by an ellipse. That is a change of layout, not of font or width, so it is not made here. If the banner is to be turned into Grade 10's arrangement it is one flex-direction away and can be done on request. The blocks below the footer strip - the call to action, the strip itself, the three institutional blocks - are shared site components whose stylesheet is used by every page. Two of them carry uneven padding, 36px over 40px and 14px over 0px. They are left alone: changing them here would change them on every page in the site. The eligibility and course cards are left as they are. Their body copy is already 16px and there is no table on this page. ============================================================================ */ .skill-vocational-certified { font-family: Arial, Helvetica, sans-serif !important; box-sizing: border-box !important; } .skill-vocational-certified-content { padding-left: 0 !important; margin-left: max(4%, 50% - 690px) !important; } /* ---------------------------------------------------------------- the pill */ .skill-vocational-certified-label { width: fit-content !important; display: flex !important; align-items: center !important; gap: 10px !important; padding: 11px 20px !important; margin-bottom: 25px !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; border-radius: 30px !important; background: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.3px !important; backdrop-filter: blur(5px) !important; } .skill-vocational-certified-label i { font-size: 16px !important; line-height: 1.3 !important; letter-spacing: 0.3px !important; } /* ------------------------------------------- the category and the title */ .certificate-category { font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: #a9c7ff !important; } .skill-vocational-certified-content h3 { font-family: Roboto, Arial, sans-serif !important; font-size: 40px !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -1px !important; text-transform: uppercase !important; color: #ffffff !important; text-align: left !important; margin: 0 !important; } .skill-vocational-certified-content h3 span { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; color: #a9c7ff !important; } /* ---------------------------------------------------------------- the rule */ .skill-vocational-certified-line { width: 36px !important; height: 3px !important; margin: 24px 0 20px !important; background: #ffffff !important; border-radius: 10px !important; } /* --------------------------------------- the two paragraphs, the pill, the button */ .skill-vocational-certified-content > p { font-family: Arial, Helvetica, sans-serif !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.75 !important; letter-spacing: 0.2px !important; color: rgba(255, 255, 255, 0.9) !important; text-align: justify !important; margin-top: 0 !important; } .programme-duration, .certificate-btn { font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.3px !important; } .programme-duration i, .certificate-btn i { font-size: 15px !important; letter-spacing: 0.3px !important; } /* ---------------------------------------------------------- the sections */ .eligibility-section > .container, .courses-section > .courses-container { width: 92% !important; max-width: 1380px !important; margin-left: auto !important; margin-right: auto !important; } /* -------------------------------------------------------- the decorations */ .skill-vocational-certified-dots, .skill-vocational-certified-ring { display: none !important; } /* ============================================================================ THE SAME LADDER GRADE 10 USES ============================================================================ */ @media screen and (max-width: 1399px) { .skill-vocational-certified-content > p { font-size: 16px !important; line-height: 1.75 !important; } } @media screen and (max-width: 1199px) { .skill-vocational-certified-content { margin-left: max(3%, 50% - 690px) !important; } .skill-vocational-certified-label { gap: 9px !important; padding: 10px 18px !important; margin-bottom: 22px !important; font-size: 15px !important; } .skill-vocational-certified-label i { font-size: 15px !important; } .skill-vocational-certified-content h3 { font-size: 40px !important; line-height: 1.08 !important; letter-spacing: -1px !important; } .eligibility-section > .container, .courses-section > .courses-container { width: 94% !important; } } @media screen and (max-width: 991px) { .skill-vocational-certified-label { gap: 8px !important; padding: 9px 17px !important; margin-bottom: 20px !important; font-size: 14px !important; line-height: 1.35 !important; } .skill-vocational-certified-label i { font-size: 14px !important; } .skill-vocational-certified-content h3 { font-size: 36px !important; line-height: 1.1 !important; letter-spacing: -0.8px !important; } .skill-vocational-certified-line { margin: 18px 0 15px !important; } .skill-vocational-certified-content > p { font-size: 16px !important; line-height: 1.65 !important; } } @media screen and (max-width: 767px) { .skill-vocational-certified-content { margin-left: max(5%, 50% - 690px) !important; } .skill-vocational-certified-label { gap: 8px !important; padding: 8px 15px !important; margin-bottom: 18px !important; font-size: 13px !important; line-height: 1.35 !important; } .skill-vocational-certified-label i { font-size: 13px !important; } .skill-vocational-certified-content h3 { font-size: 34px !important; line-height: 1.08 !important; letter-spacing: -0.8px !important; } .skill-vocational-certified-content > p { font-size: 15px !important; line-height: 1.6 !important; } .eligibility-section > .container, .courses-section > .courses-container { width: 90% !important; } } @media screen and (max-width: 575px) { .skill-vocational-certified-label { gap: 7px !important; padding: 7px 13px !important; margin-bottom: 16px !important; font-size: 12px !important; line-height: 1.4 !important; } .skill-vocational-certified-label i { font-size: 12px !important; } .skill-vocational-certified-content h3 { font-size: 30px !important; line-height: 1.1 !important; letter-spacing: -0.6px !important; } .skill-vocational-certified-content > p { font-size: 14px !important; line-height: 1.6 !important; } } @media screen and (max-width: 480px) { .skill-vocational-certified-content { margin-left: max(4%, 50% - 690px) !important; } .skill-vocational-certified-label { gap: 6px !important; padding: 6px 12px !important; margin-bottom: 14px !important; font-size: 11px !important; line-height: 1.4 !important; } .skill-vocational-certified-label i { font-size: 11px !important; } .skill-vocational-certified-content h3 { font-size: 29px !important; } .skill-vocational-certified-line { width: 30px !important; height: 3px !important; margin: 16px 0 !important; } .eligibility-section > .container, .courses-section > .courses-container { width: 92% !important; } } @media screen and (max-width: 400px) { .skill-vocational-certified-content h3 { font-size: 29px !important; line-height: 1.1 !important; letter-spacing: -0.4px !important; } } /* ============================================================================ ELIGIBILITY CRITERIA - THE FIVE CARDS PUT ON ONE LEFT EDGE ---------------------------------------------------------------------------- Measured at a 1000px viewport before this block. The five cards are all the same height already, 229.5px each, and that is left alone. What was wrong was everything inside them. card 1 heading left 86.3 body left 86.3 "Minimum Qualification:" card 2 heading left 400.6 body left 371.6 "Minimum Age:" card 3 heading left 656.8 body left 656.8 "Appearing Students:" card 4 heading left 86.3 body left 86.3 "Technical Background:" card 5 heading left 426.9 body left 371.6 "Age Limit:" Five headings starting at five different places, and five lines of body copy starting at five different places again - and in three of the five cards the heading and the paragraph do not even start on the same line. Nothing was lined up with anything. THE CAUSE Two things, and both had to go. The card is a flex column with align-items:center and text-align:center, so the icon was centred and the content column was sized to its own text rather than to the card. The content column is itself a flex column, and its two children were not stretched either, so each one took only as wide as its longest line. Centre that and you get a different left edge on every card, because every card has different words in it. Centring text inside a card is not wrong in itself. Centring it in a shrink-to-fit box is what produces the staircase. WHAT IS DONE .eligibility-card align-items flex-start text-align left .eligibility-content width 100%, align-items flex-start, text-align left, flex-direction column .eligibility-content h3 width 100%, text-align left .eligibility-content p width 100%, text-align left The icon, the heading and the paragraph now all begin on the card's own left padding edge, 14px in, on all five cards. The 01 to 05 in the corner is absolutely positioned and is not touched. THE HEADING It was 26.8px at a 1000px viewport and 26.272px at 912 - a viewport-relative value, so it was a different size at every width, and at 68% larger than the 16px of copy directly under it. Large enough that "Technical Background:" and "Appearing Students:" and "Minimum Qualification:" all wrapped onto two lines while "Minimum Age:" and "Age Limit:" sat on one, which is most of what made the row look uneven. It is now 17px at weight 700 on a 1.35 line, which is the card-title size the rest of the site uses - the Programme Overview cards on Grade 12 carry their titles at 17px. Fixed, not viewport-relative, so it is the same at every width. At 17px the long three fit on one line and the row evens up. The colour is left as it was - #17203D. Only the alignment and the size are named here. ============================================================================ */ .eligibility-section .eligibility-card { align-items: flex-start !important; text-align: left !important; } .eligibility-section .eligibility-content { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } .eligibility-section .eligibility-content h3, .eligibility-section .eligibility-content p { width: 100% !important; text-align: left !important; } .eligibility-section .eligibility-content h3 { font-family: Arial, Helvetica, sans-serif !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: 0 !important; } .eligibility-section .eligibility-content h3 b { font-weight: 700 !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; } /* ============================================================================ THE INSIDE OF THE TWO SECTIONS PUT ON THE HEADER AND FOOTER EDGES TOO ---------------------------------------------------------------------------- The container of each section was already on the header and footer widths and measured 0.0 on each side. That was only the outside of the box. Everything inside it was still 42px in. header and footer content 26.9 .... 869.9 843.0 wide .eligibility-section > .container 26.9 .... 869.9 843.0 wide on the header edges .animated-section-heading 68.9 .... 827.9 759.0 wide 42.0 in each side .eligibility-grid 68.9 .... 827.9 759.0 wide 42.0 in each side .courses-section > .courses-container 26.9 .... 869.9 843.0 wide on the header edges .animated-section-heading 68.9 .... 827.9 759.0 wide 42.0 in each side .courses-grid 68.9 .... 827.9 759.0 wide 42.0 in each side The container itself was on the header edges. Everything inside it was 42px in from them, and all of it was the same 42px, because the container carries 42px of left and right padding. That padding is the whole of the gap - the margin on the container is what put the container itself on the header edge, and once the container is on the header edge the padding has nothing left to do but push the contents back off it. So both grids were 84px narrower than the header and the footer, and the first card in each row and the last card in each row both sat 42px inside the edges they were supposed to be level with. WHAT IS DONE .eligibility-section > .container, .courses-section > .courses-container padding-left 0 padding-right 0 Only the two horizontal values. The vertical padding on both is a separate pair and is left exactly as it was. What this does: .animated-section-heading on the header and footer edges .eligibility-grid on the header and footer edges .courses-grid on the header and footer edges first card in each row on the left edge last card in each row on the right edge The grids are grids, so the cards share out the extra 84px between them - each card is 42px wider and the gap between the two columns is unchanged. Nothing is clipped, nothing overflows, and no card loses a line of text, because nothing about their width is fixed. THE CARD PADDING IS NOT TOUCHED Each card carries its own padding - 20px on the eligibility cards, 18px on the course cards - and that is the space between the card's edge and the words inside it. It is not a gutter to the page and it is left alone. THE SAME CHANGE ON THE OTHER TWO PAGES IN THIS FOLDER This was written for the Certificate Programmes page first, where it was caught from a screenshot of the course cards stopping short of the block below them. The certificate page and the advanced diploma page carry the same 42px and were given the same two declarations, so all three now agree. The Advanced Diploma page was already done in an earlier block. That block is left exactly where it is and this one repeats it. ============================================================================ */ .eligibility-section > .container, .courses-section > .courses-container { padding-left: 0 !important; padding-right: 0 !important; } /* ============================================================================ "AGE LIMIT:" SAT UP 12px LOWER THAN THE OTHER HEADINGS - WHY ---------------------------------------------------------------------------- Two of the five headings sat a line higher than the other three, and it was not the text. Measured at a 1000px viewport before this block: card icon bottom h3 top space between 1 1294.7 1319.1 24.4px 2 1294.7 1319.1 24.4px 3 1294.7 1306.7 12.0px "Appearing Students:" 4 1458.9 1512.9 12.0px "Technical Background:" 5 1458.9 1525.3 24.4px "Age Limit:" Every heading is one line, 27.0px tall, and every icon is 48px with a 12px margin under it - the card's own rule, which is the same on all five. So the 12.4px of extra space above two of them is not coming from the icon. IT IS COMING FROM .eligibility-content The page's own rule at line 2782 sets .eligibility-content { height: 100%; display: flex; justify-content: center; align-items: center; } height 100% of a card whose height is set by its own min-height of 188px. The content box is then taller than the heading and the one or two lines of copy inside it, and justify-content:center puts that spare height ABOVE the text as well as below it. So the heading floats in the middle of whatever room is left over. Cards where the copy is one line have more spare room, so their heading floats higher. Cards where the copy runs to two lines have less, so their heading sits nearer the top and ends up level with the icon's own 12px margin. That is why the two headings that look wrong are the ones on cards 3 and 4 - they are the ones whose copy is two lines - and why it is "Age Limit:" that reads as out of line on the right-hand card of each row: card 5 has one line of copy, so it floats 12.4px above cards 3 and 4 beside it. WHAT IS DONE .eligibility-section .eligibility-content justify-content flex-start One declaration. flex-start puts the block of text at the top of the content box, so the heading on every card starts the same distance under the icon - the icon's own 12px margin, and nothing else. The align-items:flex-start and text-align:left written in the earlier block on this page are not repeated; they are still in place and still correct. This is only the third of the three centre settings on that element, and it was the one left over. NOT TOUCHED height:100% is left as it is. It is what lets the copy sit where the card's min-height says it should, and taking it away would change where the number in the corner and the copy meet. Only where the text sits inside that box changes. The card min-height, the icon, the 12px icon margin, the heading's own 8px margin under it, the copy, the corner number, the padding and the widths are all left exactly as they were. ============================================================================ */ .eligibility-section .eligibility-content { justify-content: flex-start !important; } /* ============================================================================ CERTIFICATE: THE BANNER TEXT GETS ITS LEFT PADDING BACK ON A PHONE --------------------------------------------------------------------------- ONE DECLARATION. padding-left, on one selector, below 768px. No font, no colour, no background, no border, no radius, no shadow, no width, no height, no margin, no gap, no position. The banner's top and bottom padding, its right padding and its type are not touched. No markup is touched. -------------------------------------------------------------------------- THE FAULT, MEASURED LIVE AT 390px, 360px AND 320px section padding T 0px R 0px B 0px L 0px inner padding T 0px R 0px B 0px L 0px content padding T 26px R 18px B 32px L 0px Every piece of banner text starts at the same place: .skill-vocational-certified-label L 7.80 "Home / Skill & V..." <- the breadcrumb .certificate-category L 7.80 "SKILL & VOCATIONAL PROGRAMMES" .certificate-btn L 7.80 "EXPLORE CERTIFICATE PROGRAMMES" 7.80px from the edge of the screen. Thirteen separate elements sit within 12px of it. The right padding is 18px at this width, so the banner is not even symmetric - it has an 18px margin on the right and none on the left. The header logo on the same page, measured on the same load: vw logo left edge 390 15.59px = 4.00% of the viewport 360 14.41px = 4.00% of the viewport 320 12.80px = 4.00% of the viewport So the banner text sat 7.79px LEFT of the logo directly above it, and hard against the screen edge. That is the gap in the screenshot. -------------------------------------------------------------------------- WHY IT IS ZERO, WHICH IS NOT A MISSING VALUE BUT A PRESENT ONE The gutter was never missing. It is set three times in this file: line 1434 .skill-vocational-certified-content { padding: 65px 40px 65px 7%; } line 1805 @media (max-width: 1199px) padding-left: 6%% line 1851 @media (768px - 991px) padding: 45px 25px 45px 5%% and then taken away again by one rule further down, with no media query around it at all: padding-left: 0 !important; Being later in the file and carrying !important, it beats all three. The same values are written out in the three tiers below 768px - 22px at line 3939, 18px at 4057, 16px at 4089 - and this rule overrides every one of them as well, because 0 with !important outranks any number without. -------------------------------------------------------------------------- THE ONE DECLARATION @media screen and (max-width: 767px) .skill-vocational-certified-content { padding-left: max(4%, 50% - 690px) !important; } max(4%%, 50%% - 690px) is the gutter expression the rest of the site already uses to put banner text on the header logo's left edge. Below 768px the second term is strongly negative - at 767px it is -306.5 - so it resolves to 4%%, which is exactly where the logo sits at every phone width measured. before after header logo 390 7.80 15.59 15.59 on it 360 7.20 14.41 14.41 on it 320 6.41 12.80 12.80 on it It is the same expression written for .ecce-levelN-content earlier in this work, so these three banners, the ECCE banners and the header all land on one edge at every phone width. -------------------------------------------------------------------------- NOTHING ELSE MOVES The right padding stays 22px below 481px and 18px below 768px; the top stays 26px and the bottom 32px at 480px. The banner's height, its type, its gradient, the breadcrumb chip, the category label, the h3, the rule, the duration chip, the two paragraphs and the button are all untouched, as are the rings, the dots and the photograph. box-sizing is already border-box on this element at line 3939, so the padding comes out of the width and the banner does not grow: measured width stays 390.00px at a 390px viewport and the page does not overflow. -------------------------------------------------------------------------- ABOVE 768px NOTHING CHANGES The declaration is inside max-width:767px, so the tablet and desktop banners are exactly as they are now. Worth knowing, not changed here: that unguarded padding-left: 0 also overrides the 7%% / 6%% / 5%% gutter above 768px, so the desktop banner text also starts hard against the edge. That is outside a mobile view and is left alone - say the word and it is the same one declaration in a wider query. ============================================================================ */ /* ---- the banner text gets its left padding back on a phone ---- */ /* An unguarded padding-left:0 !important further down this file overrides the 7%% / 6%% / 5%% gutter AND every mobile tier, so all the banner text starts 7.80px from the screen edge at 390px - 7.79px left of the header logo directly above it, which sits at 4.00%% of the viewport. Restored below 768px with the same expression the ECCE banners use, so the text lands on the logo at 390, 360 and 320. box-sizing is already border-box, so the banner does not widen. Top, bottom and right padding untouched. */ @media screen and (max-width: 767px) { .skill-vocational-certified-content { padding-left: max(4%, 50% - 690px) !important; } }